<template>
  <div>
    <!-- 地图选择的模态窗 -->
    <Modal v-model="modal.map" :title="modalTitle" :mask-closable="false" width="1020">
      <Row>
        <i-col span="5">
          <label>
            地区：
            <input v-model="location" />
          </label>
        </i-col>
        <i-col span="6">
          <label>
            关键词：
            <input v-model="keyword" />
          </label>
        </i-col>
        <i-col span="5">
          <label>
            经度：
            <input v-model="marker.lng" readonly />
          </label>
        </i-col>
        <i-col span="5">
          <label>
            纬度：
            <input v-model="marker.lat" readonly />
          </label>
        </i-col>
        <i-col span="3">
          <Button type="primary" size="small" @click="confirmChoiceLngAndLat">确认选择</Button>
        </i-col>
      </Row>

      <baidu-map
        style="width: 100%; height: 600px;padding-top: 20px;"
        :center="center"
        :zoom="zoom"
        :scroll-wheel-zoom="true"
        :keyboard="true"
        @click="clickMap"
      >
        <!-- 城市列表 -->
        <!-- <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list> -->
        <!-- 地图类型 -->
        <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
        <!-- 比例尺 -->
        <bm-scale :center="center" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
        <!-- 缩放 -->
        <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-navigation>
        <!-- 定位 -->
        <bm-geolocation
          anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
          :showAddressBar="true"
          :autoLocation="true"
        ></bm-geolocation>
        <!-- 缩略图 -->
        <!-- <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map> -->
        <!-- 标点 -->
        <bm-marker :position="marker" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
        <!-- 版权信息 -->
        <!-- <bm-copyright
          anchor="BMAP_ANCHOR_TOP_RIGHT"
          :copyright="[{id: 1, content: '版权所有', bounds: {ne: {lng: 110, lat: 40}, sw:{lng: 0, lat: 0}}}, {id: 2, content: '<a href=\'http://zywork.top\' target=\'_blank\'>赣州智悦科技有限公司</a>'}]"
        ></bm-copyright> -->
        <!-- 搜索组件 -->
        <bm-view class="map"></bm-view>
        <bm-local-search
          :keyword="keyword"
          :auto-viewport="true"
          :forceLocal="true"
          :pageCapacity="8"
          :location="location"
          v-on:infohtmlset="infohtmlset"
        ></bm-local-search>
      </baidu-map>
      <div slot="footer">
        <Button type="text" size="large" @click="cancelModal('map')">取消</Button>
        <Button type="primary" size="large" @click="confirmChoiceLngAndLat">确认选择</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: 'BaiduMapModal',
  data() {
    return {
      modalTitle: '选择经纬度',
      modal: {
        map: false,
      },
      center: {
        lng: 115.01161,
        lat: 25.86076
      },
      marker: {
        lng: 115.01161,
        lat: 25.86076
      },
      zoom: 12,
      keyword: '',
      location: '赣州市',
    }
  },
  computed: {},
  mounted() {},
  methods: {
    cancelModal(modal) {
      this.modal[modal] = false
    },
    /**
     * 点击地图定位当前点击的地点
     */
    clickMap(e) {
      this.marker = e.point
    },
    /**
     * 搜索后标注创建事件
     */
    infohtmlset(e) {
      this.marker = e.point
    },
    /**
     * 确认选择经纬度
     */
    confirmChoiceLngAndLat() {
      this.cancelModal('map')
      this.$emit('confirmChoiceLngAndLat', this.marker.lng, this.marker.lat)
    },
  }
}
</script>

<style>
.map {
  height: 600px;
}
</style>
